<template>
  <div class="app-container">
    <!-- 页面标题区域 -->
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">商品规格管理</h1>
        <p class="page-subtitle">管理商品的规格属性，如颜色、尺码、容量等</p>
      </div>
      <div class="header-actions">
        <el-button
          type="primary"
          icon="Plus"
          @click="handleAdd"
          v-hasPermi="['transaction:spec:add']"
          class="primary-action-btn"
        >
          新增规格
        </el-button>
      </div>
    </div>

    <!-- 搜索表单区域 -->
    <div class="search-section">
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="80px" class="search-form">
        <el-form-item label="规格名称" prop="name">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入规格名称，如：颜色、尺码、容量"
            clearable
            @keyup.enter="handleQuery"
            class="custom-input"
            prefix-icon="Search"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery" class="search-btn">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery" class="reset-btn">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="action-section">
      <el-row :gutter="16" class="action-row">
        <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="Edit"
            :disabled="single"
            @click="handleUpdate"
            v-hasPermi="['transaction:spec:edit']"
            class="action-btn edit-btn"
          >修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="Delete"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['transaction:spec:remove']"
            class="action-btn delete-btn"
          >删除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="Download"
            @click="handleExport"
            v-hasPermi="['transaction:spec:export']"
            class="action-btn export-btn"
          >导出</el-button>
        </el-col>
        <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
    </div>

    <!-- 数据表格区域 -->
    <div class="table-section">
      <el-table
        v-loading="loading"
        :data="specList"
        @selection-change="handleSelectionChange"
        class="custom-table"
        :expand-row-keys="expandedRows"
        @expand-change="handleExpandChange"
        row-key="id"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column type="expand" width="50">
          <template #default="props">
            <div class="expand-content">
              <div class="expand-header">
                <div class="expand-title">
                  <el-icon class="expand-icon"><List /></el-icon>
                  <h4>规格值列表</h4>
                  <el-tag type="info" size="small">{{ (props.row.specValues || []).length }}个值</el-tag>
                </div>
                <el-button 
                  type="primary" 
                  size="small" 
                  icon="Plus"
                  @click="addSpecValue(props.row)"
                  class="add-spec-value-btn"
                >
                  添加规格值
                </el-button>
              </div>
              <el-table
                :data="props.row.specValues || []"
                border
                size="small"
                class="spec-values-table"
                row-key="id"
              >
                <el-table-column prop="value" label="规格值" width="200" />
                
                <el-table-column label="操作" width="150" align="center">
                  <template #default="scope">
                    <el-button 
                      link 
                      type="primary" 
                      size="small"
                      @click="editSpecValue(props.row, scope.row)"
                    >
                      编辑
                    </el-button>
                    <el-button 
                      link 
                      type="danger" 
                      size="small"
                      @click="deleteSpecValue(props.row, scope.row)"
                    >
                      删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="规格ID" align="center" prop="id" width="100" />
        <el-table-column label="规格名称" align="center" prop="name" min-width="200">
          <template #default="scope">
            <div class="spec-name-cell">
              <el-icon class="spec-icon"><Collection /></el-icon>
              <span class="spec-name">{{ scope.row.name }}</span>
              <el-tag 
                v-if="scope.row.specValues && scope.row.specValues.length > 0" 
                type="success" 
                size="small"
                class="spec-count-tag"
              >
                {{ scope.row.specValues.length }}个值
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime" width="180">
          <template #default="scope">
            <span class="time-text">{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="更新时间" align="center" prop="updateTime" width="180">
          <template #default="scope">
            <span class="time-text">{{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
          <template #default="scope">
            <el-button 
              link 
              type="primary" 
              icon="Edit" 
              @click="handleUpdate(scope.row)" 
              v-hasPermi="['transaction:spec:edit']"
              class="table-action-btn"
            >修改</el-button>
            <el-button 
              link 
              type="danger" 
              icon="Delete" 
              @click="handleDelete(scope.row)" 
              v-hasPermi="['transaction:spec:remove']"
              class="table-action-btn"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页区域 -->
    <div class="pagination-section">
      <pagination
        v-show="total>0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <!-- 添加或修改商品规格对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body class="custom-dialog">
      <el-form ref="specRef" :model="form" :rules="rules" label-width="100px" class="dialog-form">
        <el-form-item label="规格名称" prop="name">
          <el-input 
            v-model="form.name" 
            placeholder="请输入规格名称，如：颜色、尺码、容量" 
            class="dialog-input"
            prefix-icon="Collection"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm" class="submit-btn">确 定</el-button>
          <el-button @click="cancel" class="cancel-btn">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 规格值编辑对话框 -->
    <el-dialog 
      :title="specValueTitle" 
      v-model="specValueOpen" 
      width="400px" 
      append-to-body 
      class="custom-dialog"
    >
      <el-form ref="specValueRef" :model="specValueForm" :rules="specValueRules" label-width="80px">
        <el-form-item label="规格值" prop="value">
          <el-input 
            v-model="specValueForm.value" 
            placeholder="请输入规格值" 
            class="dialog-input"
            prefix-icon="Edit"
          />
        </el-form-item>
        <!-- <el-form-item label="排序" prop="sort">
          <el-input-number 
            v-model="specValueForm.sort" 
            :min="0" 
            :max="999"
            class="dialog-input-number"
          />
        </el-form-item> -->
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitSpecValueForm" class="submit-btn">确 定</el-button>
          <el-button @click="cancelSpecValue" class="cancel-btn">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Spec">
import { listSpec, getSpec, delSpec, addSpec, updateSpec } from "@/api/transaction/spec"
import { listValue, getValue, delValue, addValue, updateValue } from "@/api/transaction/value"
import { List, Collection, Edit } from '@element-plus/icons-vue'

const { proxy } = getCurrentInstance()

const specList = ref([])
const open = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const title = ref("")

// 展开行相关
const expandedRows = ref([])

// 规格值编辑相关
const specValueOpen = ref(false)
const specValueTitle = ref("")
const specValueForm = ref({})
const specValueRules = ref({
  value: [
    { required: true, message: "请输入规格值", trigger: "blur" }
  ]
})

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    name: null,
  },
  rules: {
    name: [
      { required: true, message: "请输入规格名称", trigger: "blur" }
    ]
  }
})

const { queryParams, form, rules } = toRefs(data)

/** 查询商品规格列表 */
function getList() {
  loading.value = true
  listSpec(queryParams.value).then(response => {
    specList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}

// 处理展开行变化
function handleExpandChange(row, expandedRows) {
  console.log('展开行变化:', row, expandedRows)
}

// 添加规格值
function addSpecValue(spec) {
  specValueForm.value = {
    specId: spec.id,
    value: '',
    
  }
  specValueTitle.value = `添加规格值 - ${spec.name}`
  specValueOpen.value = true
}

// 编辑规格值
function editSpecValue(spec, specValue) {
  specValueForm.value = { ...specValue }
  specValueTitle.value = `编辑规格值 - ${spec.name}`
  specValueOpen.value = true
}

// 删除规格值
function deleteSpecValue(spec, specValue) {
  proxy.$modal.confirm(`是否确认删除规格值 "${specValue.value}"？`).then(() => {
    return delValue(specValue.id)
  }).then(() => {
    proxy.$modal.msgSuccess("删除成功")
    getList()
  }).catch(() => {})
}

// 提交规格值表单
function submitSpecValueForm() {
  proxy.$refs["specValueRef"].validate(valid => {
    if (valid) {
      if (specValueForm.value.id != null) {
        // 修改规格值
        updateValue(specValueForm.value).then(() => {
          proxy.$modal.msgSuccess("修改成功")
          specValueOpen.value = false
          getList()
        })
      } else {
        // 新增规格值
        addValue(specValueForm.value).then(() => {
          proxy.$modal.msgSuccess("新增成功")
          specValueOpen.value = false
          getList()
        })
      }
    }
  })
}

// 取消规格值编辑
function cancelSpecValue() {
  specValueOpen.value = false
  specValueForm.value = {}
}

// 取消按钮
function cancel() {
  open.value = false
  reset()
}

// 表单重置
function reset() {
  form.value = {
    id: null,
    name: null,
    delFlag: null,
    createTime: null,
    updateTime: null
  }
  proxy.resetForm("specRef")
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef")
  handleQuery()
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id)
  single.value = selection.length != 1
  multiple.value = !selection.length
}

/** 新增按钮操作 */
function handleAdd() {
  reset()
  open.value = true
  title.value = "添加商品规格"
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset()
  const _id = row.id || ids.value
  getSpec(_id).then(response => {
    form.value = response.data
    open.value = true
    title.value = "修改商品规格"
  })
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["specRef"].validate(valid => {
    if (valid) {
      if (form.value.id != null) {
        updateSpec(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功")
          open.value = false
          getList()
        })
      } else {
        addSpec(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功")
          open.value = false
          getList()
        })
      }
    }
  })
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.id || ids.value
  proxy.$modal.confirm('是否确认删除商品规格编号为"' + _ids + '"的数据项？').then(function() {
    return delSpec(_ids)
  }).then(() => {
    getList()
    proxy.$modal.msgSuccess("删除成功")
  }).catch(() => {})
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('transaction/spec/export', {
    ...queryParams.value
  }, `spec_${new Date().getTime()}.xlsx`)
}

getList()
</script>

<style scoped>
.app-container {
  padding: 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  position: relative;
}

.app-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  z-index: -1;
}

/* 页面标题区域 */
.page-header {
  background: rgba(255, 255, 255, 0.95);
  padding: 32px;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
}

.page-header:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.header-content {
  flex: 1;
}

.page-title {
  margin: 0 0 8px 0;
  font-size: 28px;
  font-weight: 700;
  color: #2c3e50;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-subtitle {
  margin: 0;
  color: #7f8c8d;
  font-size: 16px;
  font-weight: 400;
}

.primary-action-btn {
  background: linear-gradient(135deg, #409EFF 0%, #36a3f7 100%);
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 12px;
  transition: all 0.3s ease;
  color: white;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.primary-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(64, 158, 255, 0.4);
}

.search-section {
  background: rgba(255, 255, 255, 0.95);
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.search-section:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.search-form .el-form-item {
  margin-right: 20px;
  margin-bottom: 16px;
}

.search-form .el-input,
.search-form .el-select,
.search-form .el-date-editor {
  width: 280px;
}

.custom-input .el-input__wrapper {
  border-radius: 12px;
  border: 2px solid #e4e7ed;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.custom-input .el-input__wrapper:hover {
  border-color: #409EFF;
  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
  transform: translateY(-1px);
}

.custom-input .el-input__wrapper.is-focus {
  border-color: #409EFF;
  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.2);
}

.search-btn {
  background: linear-gradient(135deg, #409EFF 0%, #36a3f7 100%);
  border: none;
  padding: 10px 24px;
  font-size: 14px;
  border-radius: 10px;
  transition: all 0.3s ease;
  color: white;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.search-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(64, 158, 255, 0.4);
}

.reset-btn {
  background: linear-gradient(135deg, #909399 0%, #a6a9ad 100%);
  border: none;
  padding: 10px 24px;
  font-size: 14px;
  border-radius: 10px;
  transition: all 0.3s ease;
  color: white;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(144, 147, 153, 0.3);
}

.reset-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(144, 147, 153, 0.4);
}

.action-section {
  background: rgba(255, 255, 255, 0.95);
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.action-section:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.action-row .el-col {
  margin-bottom: 12px;
}

.action-btn {
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 10px;
  transition: all 0.3s ease;
  font-weight: 600;
  border: none;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.add-btn {
  background: linear-gradient(135deg, #409EFF 0%, #36a3f7 100%);
}

.add-btn:hover {
  box-shadow: 0 6px 20px rgba(64, 158, 255, 0.4);
}

.edit-btn {
  background: linear-gradient(135deg, #67C23A 0%, #85ce61 100%);
}

.edit-btn:hover {
  box-shadow: 0 6px 20px rgba(103, 194, 58, 0.4);
}

.delete-btn {
  background: linear-gradient(135deg, #F56C6C 0%, #f78989 100%);
}

.delete-btn:hover {
  box-shadow: 0 6px 20px rgba(245, 108, 108, 0.4);
}

.export-btn {
  background: linear-gradient(135deg, #E6A23C 0%, #ebb563 100%);
}

.export-btn:hover {
  box-shadow: 0 6px 20px rgba(230, 162, 60, 0.4);
}

.table-section {
  background: rgba(255, 255, 255, 0.95);
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.table-section:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.custom-table {
  font-size: 14px;
  border-radius: 12px;
  background: transparent;
  overflow: hidden;
  border: none;
}

.custom-table th {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  font-weight: 700;
  color: #2c3e50;
  padding: 18px 12px;
  border-bottom: 2px solid #e9ecef;
  font-size: 14px;
}

.custom-table td {
  padding: 18px 12px;
  border-bottom: 1px solid #f8f9fa;
  transition: all 0.3s ease;
}

.custom-table__row:hover {
  background: linear-gradient(135deg, #f8f9ff 0%, #e8f4ff 100%);
  transform: scale(1.01);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1);
}

/* 展开内容样式 */
.expand-content {
  padding: 24px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px;
  margin: 16px;
  border: 1px solid #e9ecef;
}

.expand-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid #e9ecef;
}

.expand-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.expand-icon {
  font-size: 20px;
  color: #409EFF;
}

.expand-title h4 {
  margin: 0;
  color: #2c3e50;
  font-weight: 700;
  font-size: 18px;
}

.add-spec-value-btn {
  background: linear-gradient(135deg, #409EFF 0%, #36a3f7 100%);
  border: none;
  color: white;
  font-weight: 600;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.add-spec-value-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(64, 158, 255, 0.4);
}

.spec-values-table {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.spec-values-table th {
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
  font-weight: 600;
  color: #2c3e50;
}

.spec-name-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.spec-icon {
  font-size: 18px;
  color: #409EFF;
}

.spec-name {
  font-weight: 600;
  color: #2c3e50;
  font-size: 15px;
}

.spec-count-tag {
  font-size: 11px;
  border-radius: 6px;
  font-weight: 600;
}

.time-text {
  color: #7f8c8d;
  font-size: 13px;
  font-weight: 500;
}

.table-action-btn {
  padding: 8px 16px;
  font-size: 13px;
  border-radius: 8px;
  transition: all 0.3s ease;
  margin: 0 4px;
  font-weight: 600;
}

.table-action-btn:hover {
  background: rgba(64, 158, 255, 0.1);
  color: #409EFF;
  transform: translateY(-1px);
}

.small-padding.fixed-width {
  min-width: 160px;
}

.pagination-section {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.custom-dialog {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.custom-dialog .el-dialog__header {
  background: linear-gradient(135deg, #409EFF 0%, #36a3f7 100%);
  color: white;
  padding: 24px 28px;
  margin: 0;
}

.custom-dialog .el-dialog__title {
  color: white;
  font-weight: 700;
  font-size: 20px;
}

.custom-dialog .el-dialog__body {
  padding: 28px;
  background: rgba(255, 255, 255, 0.98);
}

.dialog-form .el-form-item {
  margin-bottom: 24px;
}

.dialog-input .el-input__wrapper {
  border-radius: 10px;
  border: 2px solid #e4e7ed;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.dialog-input .el-input__wrapper:hover {
  border-color: #409EFF;
  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
}

.dialog-input .el-input__wrapper.is-focus {
  border-color: #409EFF;
  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.2);
}

.dialog-input-number {
  width: 100%;
}

.dialog-input-number .el-input-number__decrease,
.dialog-input-number .el-input-number__increase {
  border-radius: 8px;
}

.dialog-footer {
  text-align: right;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 2px solid #f0f0f0;
}

.submit-btn {
  background: linear-gradient(135deg, #409EFF 0%, #36a3f7 100%);
  border: none;
  padding: 12px 28px;
  font-size: 14px;
  border-radius: 10px;
  transition: all 0.3s ease;
  color: white;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(64, 158, 255, 0.4);
}

.cancel-btn {
  background: linear-gradient(135deg, #C0C4CC 0%, #d3d4d6 100%);
  border: none;
  padding: 12px 28px;
  font-size: 14px;
  border-radius: 10px;
  transition: all 0.3s ease;
  color: white;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(192, 196, 204, 0.3);
}

.cancel-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(192, 196, 204, 0.4);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .app-container {
    padding: 16px;
  }
  
  .page-header {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .search-section,
  .action-section,
  .table-section {
    padding: 16px;
  }
  
  .search-form .el-input,
  .search-form .el-select,
  .search-form .el-date-editor {
    width: 100%;
  }
  
  .action-row .el-col {
    width: 100%;
    margin-bottom: 8px;
  }
  
  .expand-content {
    padding: 16px;
  }
  
  .expand-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
}

/* 加载动画 */
.el-loading-mask {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
}

/* 滚动条美化 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #409EFF 0%, #36a3f7 100%);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #36a3f7 0%, #409EFF 100%);
}
</style> 